<template>
  <div class="note-detail-root-page">
    <div class="note-detail-main">
      <div class="header">
        <div class="title">{{ title }}</div>
        <div class="origin" @click.stop="toAuthor">
          <span>来源：</span>
          <span class="origin-cell" >
            <img class="user-head-picture" :src="user.headPicture" alt="" />
            <span>{{ user.username }}</span>
          </span>
        </div>
        <div class="tags" v-if="tags.length > 0">
          书签：{{ tags.map((tag) => tag.tagname).join("、") }}
        </div>

        <div class="updated-at" v-if="updated_at">
          更新时间：{{ updated_at }}
        </div>
        <div class="created-at" v-else>发稿时间：{{ created_at }}</div>
      </div>
      <div class="editor-content-view" v-highlight>
        <div v-html="content"></div>
      </div>
    </div>

  </div>
</template>

<script>
import "./custom-wangeditor.scss"; // 引入 css
import { onMounted, ref } from "vue";
import request from "utils/request";
import { addWaterMarker } from "utils/addWaterMarker.js";
import { getParamsCode } from "utils/getParamsCode";

export default {
  name: "JddChromePluginsNoteDetail",
  setup() {
    const id = getParamsCode("id");
    const title = ref("");
    const content = ref("");
    const updated_at = ref("");
    const created_at = ref("");
    const user = ref({});
    const tags = ref([]);
    const watermarking = ref(false);

    onMounted(async () => {
      if (id) {
        let ret = await request.get(`/essay/${id}`);
        if (ret.code == 200) {
          document.title = ret.data.essaytitle;
          title.value = ret.data.essaytitle;
          content.value = ret.data.content;
          updated_at.value = ret.data.updated_at;
          created_at.value = ret.data.created_at;
          user.value = ret.data.user;
          tags.value = ret.data.tags;
          watermarking.value = ret.data.watermarking;
          let Root = document.getElementById("essay-root");
          watermarking.value &&
            addWaterMarker(`${user.value.username}`, Root, "16px Georgia");
        }
      }
    });

    const toAuthor = () => {
      window.open(
        "/blog/user-home.html?id=" + user.value.id,
        "__blank"
      );
    };

    return {
      title,
      content,
      user,
      tags,
      created_at,
      updated_at,
      toAuthor,
    };
  },
};
</script>

<style lang="scss" scoped>
.note-detail-root-page {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  background: #f8f8f8;
}

.note-detail-main {
  width: 1050px;
  margin: 0 auto;
  height: 100%;
  padding: 15px 0px;
  box-sizing: border-box;
  background: white;
  position: relative;
  .header {
    text-align: center;
    font-size: 22px;
    line-height: 36px;
    color: #000;
    .origin{
      cursor: pointer;
    }
    .origin,
    .tags,
    .created-at,
    .updated-at {
      display: flex;
      align-items: center;
      font-size: 13px;
      line-height: 24px;
      text-align: left;
      padding-left: 20px;
    }
    .title {
      text-shadow: 0 0 2px hsl(40, 28.57%, 28.82%),
        0 0 2px hsl(40, 28.57%, 28.82%), 0 0 2px hsl(40, 28.57%, 28.82%); /*多个叠加*/
      font-size: 24px;
      color: #fff;
      margin-bottom: 15px;
    }
    .origin-cell {
      display: flex;
      align-items: center;
    }
    .user-head-picture {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      margin-right: 5px;
    }
  }
}

@media screen and (max-width: 850px) {
  .note-detail-main {
    width: 100%;
  }
}

</style>
